﻿<!--
> Muaz Khan     - https://github.com/muaz-khan 
> MIT License   - https://www.webrtc-experiment.com/licence/
> Experiments   - https://github.com/muaz-khan/WebRTC-Experiment
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>How to echo cancellation / noise management / in WebRTC? | Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
        
        <style>
            p { padding: .8em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }

            img {
                height: 80%;
                width: 13em;
            }

            .image-container {
                margin: 2em 0;
                text-align: center;
            }

            .image-parent {
                border: 2px solid black;
                border-radius: 5px;
                margin: 0 2em;
            }

            .image-parent img { width: 100%; }
        </style>
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
    
        <script type="text/javascript" src="https://cdn.webrtc-experiment.com/syntax/sh_main.min.js"> </script>
        <script type="text/javascript" src="https://cdn.webrtc-experiment.com/syntax/sh_javascript.min.js"> </script>
        <script type="text/javascript" src="https://cdn.webrtc-experiment.com/syntax/sh_html.min.js"> </script>
        <link type="text/css" rel="stylesheet" href="https://cdn.webrtc-experiment.com/syntax/sh_style.css">
    </head>

    <body onload="sh_highlightDocument();">
        <article>
            <header style="text-align: center;">
                <h1>How to echo cancellation? / Noise management in <a href="https://www.webrtc-experiment.com/">WebRTC</a>?</h1>  
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

            <div class="github-stargazers"></div>

            <blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px;">
                This tutorial is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated (written in 2013)</span>. Please check this tutorial instead: <a href="https://codelabs.developers.google.com/codelabs/webrtc-web/#0">https://codelabs.developers.google.com/codelabs/webrtc-web/#0</a>
            </blockquote>
            
            <section class="experiment">
                <h2 class="header">Useful Links!</h2>
                
                <ol>
                    <li>
                        <a href="http://www.slideshare.net/MuazKhan/echo-in-webrtc-why">Slides for what is the role of echo in WebRTC; and solutions!</a>
                    </li>
                    
                    <li>
                        <a href="https://www.webrtc-experiment.com/pdf/Echo-in-WebRTC-Why.pdf">Download PDF for What is Echo?</a>
                    </li>
                </ol>
                
                <div class="image-container">
                    <div class="image-parent"><img src="https://www.webrtc-experiment.com/images/Echo-in-WebRTC-Why.gif"></div>
                </div>
            </section>
            
            <section class="experiment">
                <h2 class="header">Echo Scenarios:</h2>
                
                <ol>
                    <li><strong>44.1 kHz</strong> and <strong>non-44.1 kHz</strong> sample rate <strong>mismatches</strong> cause echo</li>
                    <li>The <strong>"ambient noise reduction"</strong> which can be enabled on the built-in mic on Mac appears to cause a very small amount of echo</li>
                </ol>
            </section>
			
            <section class="experiment">
                <h2 class="header">Solutions:</h2>
                <ol>
                    <li>Ensure both <strong>capture</strong> and <strong>render</strong> devices are set to either <strong>44.1</strong> or <strong>48</strong> kHz. You can do this through the <strong>"Audio MIDI Setup"</strong> application</li>
                    <li>Disable <strong>"ambient noise reduction"</strong></li>
                </ol>
            </section>
            
            <section class="experiment">
                <p>
                    High volume can produce sound noise on some audio devices.  The value may not be significant if audio device volume is controlled externally.
                </p>
		
                <pre class="sh_javascript">
HTMLAudioElement.volume = 0.9;
HTMLAudioElement.play();
</pre>
		
                <p>
                    The <code>GainNode</code> is a simple element that lets us control the volume of the audio that’s coming into to it.
                </p>
                <pre class="sh_javascript">
var context = new webkitAudioContext(),
var sineWave = context.createOscillator();

// Declare gain node
var gainNode = context.createGainNode();

// Connect sine wave to gain node
sineWave.connect(gainNode);

// Connect gain node to speakers
gainNode.connect(context.destination);

// Play sine wave
sineWave.noteOn(0);

gainNode.gain.value = 0.9;
</pre>
		
                <p>
                    Try <a href="http://webaudioapi.com/samples/volume/" target="_blank">demo</a> locally to control volume using GainNode.
                </p>
            </section>
			
            <section class="experiment">
                <h2 class="header">Suggestions</h2>
                <ol>
                    <li>
                        If you're newcomer, newbie or beginner; you're suggested to try <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">RTCMultiConnection.js</a> or <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DataChannel" target="_blank">DataChannel.js</a> libraries.
                    </li>
                </ol>
            </section>
        
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        
            <section class="experiment">
                <h2 class="header" id="feedback">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
            
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
    
        <!-- commits.js is useless for you! -->
        <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
